<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 控制台主页一</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
  <script src="/aaa/echarts/echarts.js"></script>
</head>
<body>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">公告</div>
              <div class="layui-card-body">
                
                <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                  <div carousel-item>
                    高校共享电瓶于2019年1月1日成立了
                    
                  </div>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">共享单车简介</div>
              <div class="layui-card-body">

                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                  <div carousel-item>
                    旨在为高校学生提供便利的出行
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">数据概览</div>
              <div class="layui-card-body">
                
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                  <div carousel-item id="LAY-index-dataview">

                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM  展示年内每月收入支出和获利-->
                    <div id="expenditureFinanceHome" style="width: 400px;height:360px;display: inline-block;"></div>

                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                    <div></div>
                    <div></div>
                  </div>
                </div>
                
              </div>
            </div>
            <div class="layui-card">
              <div class="layui-tab layui-tab-brief layadmin-latestData">
                <ul class="layui-tab-title">

                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    <table id="LAY-index-topSearch"></table>
                  </div>
                  <div class="layui-tab-item">
                    <table id="LAY-index-topCard"></table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">版本信息</div>
          <div class="layui-card-body layui-text">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col>
              </colgroup>
              <tbody>
                <tr>
                  <td>当前版本</td>
                  <td>
                    1.0.1
                  </td>
                </tr>
                <tr>
                  <td>基于框架</td>
                  <td>
                    springboot
                 </td>
                </tr>
                <tr>
                  <td>主要特色</td>
                  <td>大学生 / 共享 / 绿色 / 极简</td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">效果报告</div>
          <div class="layui-card-body layadmin-takerates">
            <div class="layui-progress" lay-showPercent="yes">
              <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>
              <div class="layui-progress-bar" lay-percent="65%"></div>
            </div>
            <div class="layui-progress" lay-showPercent="yes">
              <h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
              <div class="layui-progress-bar" lay-percent="32%"></div>
            </div>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">实时监控</div>
          <div class="layui-card-body layadmin-takerates">
            <div class="layui-progress" lay-showPercent="yes">
              <h3>CPU使用率</h3>
              <div class="layui-progress-bar" lay-percent="58%"></div>
            </div>
            <div class="layui-progress" lay-showPercent="yes">
              <h3>内存占用率</h3>
              <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
            </div>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">产品动态</div>
          <div class="layui-card-body">
            <div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade" lay-filter="news">
              <div carousel-item>
                  2019年3月3日即将推出概念版共享电动车
              </div>
            </div>
          </div>
        </div>

        <div class="layui-card">
          <div class="layui-card-header">
            作者心语
            <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
          </div>
          <div class="layui-card-body layui-text layadmin-text">
            <p>一直以来，高校共享电瓶秉承为各大高校服务的宗旨，不断优化产品，满足不同环境下，不同高校的需求</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>

  <script src="/aaa/layuiadmin/layui/layui.js?t=1"></script>

  <script type="text/javascript">

      layui.use(['layer', 'laydate', 'form', 'element', 'table', 'laytpl', 'jquery'], function () {
              var layer = layui.layer,
                  laydate = layui.laydate,
                  table = layui.table;
              var $ = layui.$;

          /*打开页面即加载 收入/支出 */
          $.post({
                  url: '/aaa/finance/getFinanceInAndOut'
              }, function (data) {
                  var arrayPro1 = new Array();
                  var arrayCou1 = new Array();
                  var arrayOut1 = new Array();
                  var arraymon1 = new Array();

                  for (var i = 0; i < data.length; i++) {
                      var mon = data[i].months;
                      arrayPro1.push(mon + "月");

                      var countCost = data[i].info;
                      arrayCou1.push(countCost);

                      var countExpend = data[i].expend;
                      arrayOut1.push(countExpend);

                      var countMon = data[i].mon;
                      arraymon1.push(countMon);
                  }

                  // 填入数据
                  expenditureMyChart.setOption({
                      series: [{
                          // 根据名字对应到相应的系列
                          name: '收入',
                          data: arrayCou1
                      },
                          {
                              // 根据名字对应到相应的系列
                              name: '支出',
                              data: arrayOut1
                          },
                          {
                              // 根据名字对应到相应的系列
                              name: '收益',
                              data: arraymon1
                          }
                      ]
                  });
              });

          // 基于准备好的dom，初始化echarts实例
          var expenditureMyChart = echarts.init(document.getElementById('expenditureFinanceHome'));

          // 指定图表的配置项和数据
          var expenditureOption = {
              title: {
                  text: '收入/支出'
              },
              toolbox: { //可视化的工具箱
                  show: true,
                  feature: {
                      saveAsImage: {//保存图片
                          show: true
                      },
                      magicType: {//动态类型切换
                          type: ['bar', 'line']
                      }
                  }
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              legend: {
                  data: ['收入', '支出']
              },
              xAxis: {
                  type: 'category',
                  data: [],
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              yAxis: [
                  {
                      type: 'value',
                      name: '收支',
                      axisLabel: {
                          formatter: '{value}'
                      }
                  },
                  {
                      type: 'value',
                      name: '收益',
                      axisLabel: {
                          formatter: '{value}'
                      }
                  }
              ],
              series: [
                  {
                      name: '收入',
                      type: 'bar',
                      data: []
                  },
                  {
                      name: '支出',
                      type: 'bar',
                      data: []
                  },
                  {
                      name:'收益',
                      type:'line',
                      yAxisIndex: 1,
                      data:[]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          expenditureMyChart.setOption(expenditureOption);


      });
  </script>



  <!--<script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'console']);
  </script>-->
</body>
</html>

